<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="店铺ID/名称">
            <el-input v-model="formInline.user" placeholder="店铺ID/名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交易类型">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="店铺订单" value="店铺订单"></el-option>
              <el-option label="素材收益" value="素材收益"></el-option>
              <el-option label="素材抽佣" value="素材抽佣"></el-option>
              <el-option label="店铺权益" value="店铺权益"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单号">
            <el-input v-model="formInline.oddNumbers" placeholder="订单号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="block">
            <span class="demonstration">日期</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>
    </el-card>
    <div class="one">
      <span>店铺订单收益：<b>{{data1}}元</b></span>
      <span>素材收益：<b>{{data2}}元</b></span>
      <span>素材抽佣收益：<b>{{data3}}元</b></span>
      <span>店铺权益收益：<b>{{data4}}元</b></span>
      <span>平台总收益：<b>{{data}}元</b></span>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
    >
      <el-table-column
        prop="transaction"
        label="交易类型"
      >
      </el-table-column>
      <el-table-column
        prop="shopId"
        label="店铺ID/用户ID"
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="店铺名称/昵称"
      >
      </el-table-column>
      <el-table-column
        prop="order"
        label="订单号"
      >
      </el-table-column>
      <el-table-column
        prop="TransactionAmount"
        label="交易金额"
      >
      </el-table-column>
      <el-table-column
        prop="CommissionAmount"
        label="抽佣金额"
      >
      </el-table-column>
      <el-table-column
        prop="PlatformRevenue"
        label="平台收益"
      >
      </el-table-column>
      <el-table-column
        prop="time"
        label="交易时间"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getItem, setItem } from '@/utils/storage.js'
export default {
  data () {
    return {
      formInline: {
        user: '',
        oddNumbers: '',
        region: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value1: '',
      value2: '',
      tableData: [], // 表格数据
      data: null, // 平台总收益
      data1: null, // 店铺订单收益
      data2: null, // 素材收益
      data3: null, // 素材抽佣收益
      data4: null // 店铺权益收益
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      if (getItem('PLATINCOME')) {
        this.tableData = getItem('PLATINCOME')
      }
      const { data } = await this.$http.get('/income')
      this.tableData = data.list
      // console.log(this.tableData)
      setItem('PLATINCOME', this.tableData)
      this.tableData.forEach(item => {
        if (item.transaction === '店铺订单') {
          this.data1 += item.PlatformRevenue
        } else if (item.transaction === '素材收益') {
          this.data2 += item.PlatformRevenue
        } else if (item.transaction === '素材抽佣') {
          this.data3 += item.PlatformRevenue
        } else if (item.transaction === '店铺权益') {
          this.data4 += item.PlatformRevenue
        }
      })
      this.data = this.data1 + this.data2 + this.data3 + this.data4
    },
    onSubmit () {
      this.tableData = getItem('PLATINCOME')
      if (this.formInline.user === '' && this.formInline.oddNumbers === '' && this.formInline.region === '' && this.value1 === '') {
        return this.$message.error('至少输入一条内容！')
      }
      const qureyresult = this.tableData.filter(item => {
        return this.formInline.user.trim() === item.shopId || this.formInline.oddNumbers === item.order || this.formInline.region === item.transaction
      })
      console.log(qureyresult)
      this.tableData = qureyresult
    },
    reset () {
      this.formInline.user = ''
      this.formInline.oddNumbers = ''
      this.formInline.region = ''
      this.tableData = getItem('PLATINCOME')
    }
  }
}
</script>

<style lang="less">
.block {
  display: inline-block;
}
.margin {
  margin-left: 21px;
}
.one {
  margin: 20px 0;
  span {
    margin-right: 20px;
  }
}
</style>
